<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="./mooc_files/jquery.js.下载"></script>
<link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/4.4.1/css/bootstrap.css}">
<link rel="stylesheet" type="text/css" href="../../static/css/muke.css">
<script type="text/javascript" src="./mooc_files/jquery.SuperSlide.2.1.1.js.下载"></script>

</head>

<body class="backg_huibai" style="">

<!-- 顶部 -->
<div class="width100 float_l height490 img_backg1">
	<div class="width100 float_l height80 line_hei80">
        <!-- 顶部左边 -->
        <div class="float_l">
            <div class="float_l margin_l20">
                <p style="color:green;font-size:30px;">校园网络课堂管理系统</p>
            </div>
           
        </div>
        
        <!-- 顶部右边 -->
        <div class="float_r">
            <div class="float_l top_input">
                <input class="posi_relative" type="text" name="" size="15" id="searchText" placeholder="请输入课程名称或学校名称">
				<button id="search" class="btn btn-primary btn-sm" onclick="search()">查询</button>
            </div>
            <div class="float_l margin_l20">
                <a href="#">个人信息</a><!--跳转到个人信息界面-->
            </div>
            <div class="float_l margin_l40">
                <a href="#">观看历史</a><!--跳转到观看历史界面-->
            </div>
            <div class="float_l margin_l35">
                <a href="#">我的课程</a><!--跳转到我的课程界面-->
            </div>
        </div>
	</div>
</div>

<!--课程推荐内容-->
<div class="width100 float_l margin_t-405 margin_b40">
	<div class="width_1200 margin_auto">
    
    	<div class="width100 float_l margin_b20">
        	<div class="float_l">
            	<span class="fon_siz16">课程推荐</span>
            </div>
        </div>
        
        <div class="width100 float_l">
        	<div class="width_224 height172 float_l margin_r20 border_shadow jingguoxianshi over_pos bianshou">
            	<div class="width100 float_l img_100 z_inx_1">
                	<img src="../../static/img/uiz7.jpg"><!--背景图片-->
                </div>
                <div class="img_backg2 donghua">
                    <span class="margin_t15 float_l ">飞速上手的跨平台App开发</span>
                    <span class="float_l fon_siz12 line_hei16 color_gray margin_t5 posi_relative ">8小时带领大家步步深入学习标签的基础知识，掌握各种样式的基本用法。</span>
                </div>
                <div class="width100 float_l padding_lr20 height48 fon_siz12 line_hei48 z_inx_3 posi_relative backg_white">
                    <span class="float_l color_red"></span><!--课程信息：学校 授课教师-->
                    <span class="float_r color_gray"><span></span>人在学</span><!--授课情况；……人在学-->
            	</div>
            </div>  
            
            <div class="width_224 height172 float_l margin_r20 border_shadow jingguoxianshi over_pos bianshou">
            	<div class="width100 float_l img_100 z_inx_1">
                	<img src="../../static/img/uiz7.jpg"><!--背景图片-->
                </div>
                <div class="img_backg2 donghua">
                    <span class="margin_t15 float_l ">飞速上手的跨平台App开发</span>
                    <span class="float_l fon_siz12 line_hei16 color_gray margin_t5 posi_relative ">8小时带领大家步步深入学习标签的基础知识，掌握各种样式的基本用法。</span>
                </div>
                <div class="width100 float_l padding_lr20 height48 fon_siz12 line_hei48 z_inx_3 posi_relative backg_white">
                    <span class="float_l color_red">￥88.00</span>
                    <span class="float_r color_gray"><span>499</span>人在学</span>
            	</div>
            </div>
            
            <div class="width_224 height172 float_l margin_r20 border_shadow jingguoxianshi over_pos bianshou">
            	<div class="width100 float_l img_100 z_inx_1">
                	<img src="../../static/img/uiz7.jpg"><!--背景图片-->
                </div>
                <div class="img_backg2 donghua">
                    <span class="margin_t15 float_l ">飞速上手的跨平台App开发</span>
                    <span class="float_l fon_siz12 line_hei16 color_gray margin_t5 posi_relative ">8小时带领大家步步深入学习标签的基础知识，掌握各种样式的基本用法。</span>
                </div>
                <div class="width100 float_l padding_lr20 height48 fon_siz12 line_hei48 z_inx_3 posi_relative backg_white">
                    <span class="float_l color_red">￥88.00</span>
                    <span class="float_r color_gray"><span>499</span>人在学</span>
            	</div>
            </div>
            
            <div class="width_224 height172 float_l margin_r20 border_shadow jingguoxianshi over_pos bianshou">
            	<div class="width100 float_l img_100 z_inx_1">
                	<img src="../../static/img/uiz7.jpg"><!--背景图片-->
                </div>
                <div class="img_backg2 donghua">
                    <span class="margin_t15 float_l ">飞速上手的跨平台App开发</span>
                    <span class="float_l fon_siz12 line_hei16 color_gray margin_t5 posi_relative ">8小时带领大家步步深入学习标签的基础知识，掌握各种样式的基本用法。</span>
                </div>
                <div class="width100 float_l padding_lr20 height48 fon_siz12 line_hei48 z_inx_3 posi_relative backg_white">
                    <span class="float_l color_red">￥88.00</span>
                    <span class="float_r color_gray"><span>499</span>人在学</span>
            	</div>
            </div>
            
            <div class="width_224 height172 float_l border_shadow jingguoxianshi over_pos bianshou">
            	<div class="width100 float_l img_100 z_inx_1">
                	<img src="../../static/img/uiz7.jpg"><!--背景图片-->
                </div>
                <div class="img_backg2 donghua">
                    <span class="margin_t15 float_l ">飞速上手的跨平台App开发</span>
                    <span class="float_l fon_siz12 line_hei16 color_gray margin_t5 posi_relative ">8小时带领大家步步深入学习标签的基础知识，掌握各种样式的基本用法。</span>
                </div>
                <div class="width100 float_l padding_lr20 height48 fon_siz12 line_hei48 z_inx_3 posi_relative backg_white">
                    <span class="float_l color_red">￥88.00</span>
                    <span class="float_r color_gray"><span>499</span>人在学</span>
            	</div>
            </div> 
        </div>
        
    </div>
</div>
</body>
</html>